<template>
	<view class="layout-tabbar">
		<view :key="item.id" class="layout-tabbar-item" @click="changeTap(item)" v-for="item in formatTabsList">
			<image :src="getCurrentShowImage(item)" />

			<text v-if="item.text" :class="item.isActive && 'active'">
				{{ item.text }}
			</text>
		</view>
	</view>
</template>

<script>
import { list } from '@/page-modules/modules/tabBar';

export default {
	name: 'distributionTabBar',

	props: {
		tabIndex: {
			type: Number,
			default: 1
		},

		beforeCallBack: {
			type: Function
		},

		afterCallBack: {
			type: Function
		},

		refreshCallBack: {
			type: Function
		}
	},

	data() {
		const { tabIndex } = this;
		const formatTabsList = (list || []).map((item) => {
			const { id, ...otherparams } = item;

			const isActive = id === tabIndex;

			return {
				...otherparams,

				id,
				isActive
			};
		});

		return {
			formatTabsList: Object.freeze(formatTabsList)
		};
	},

	created() {},

	methods: {
		changeTap(params) {
			const { isActive, pagePath } = params;
			const { beforeCallBack, afterCallBack, refreshCallBack } = this;

			if (isActive) {
				refreshCallBack?.();
				return;
			}

			beforeCallBack?.();

			const url = pagePath.startsWith('\/') ? pagePath : `\/${pagePath}`;

			uni.switchTab({
				url,
				success: (e) => {
					afterCallBack?.();
				}
			});
		},

		getCurrentShowImage(params) {
			const { isActive, iconPath, selectedIconPath } = params;
			const url = (isActive ? selectedIconPath : iconPath).replace(/(.*)\.\w+$/, '$1');

			return require('@\/' + url + '.png');
		}
	}
};
</script>

<style lang="scss" scpoed>
@import '@/style/common.scss';

.layout-tabbar {
	position: fixed;
	background: #fff;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 999999;
	box-shadow: 0px 8rpx 28rpx 0px rgba(166, 179, 194, 0.3);

	@include Db_iosBottomDistance(6px);
	display: flex;
	align-items: center;
	justify-content: space-around;

	&-item {
		width: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 68rpx;
			height: 68rpx;
		}

		text {
			color: #666;
			font-size: 20rpx;

			&.active {
				color: #4875EE;
			}
		}
	}
}
</style>
